<template>
  <div v-loading="itemsLoading">
    <el-form label-width="120px">
      <template v-for="(item, index) in formRule" :key="index">
        <el-form-item :label="item.config_name + ':'" prop="name">
          <div>
            <!-- text -->
            <template v-if="item.type.value == 'text'">
              <!--  -->
              <el-input
                v-if="item.input_type.value == 'input'"
                v-model="formModel[item.name_field]"
                style="width: 300px"
              />
              <!--  -->
              <el-input-number
                v-if="item.input_type.value == 'number'"
                v-model="formModel[item.name_field]"
              />
              <!--  -->
              <el-date-picker
                v-if="item.input_type.value == 'datetime'"
                type="datetime"
                placeholder="选择时间"
                v-model="formModel[item.name_field]"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
              <!--  -->
              <el-color-picker
                v-if="item.input_type.value == 'color'"
                v-model="formModel[item.name_field]"
              />
            </template>
            <template v-if="item.type.value == 'textarea'">
              <el-input
                type="textarea"
                v-model="formModel[item.name_field]"
                style="width: 300px"
              />
            </template>
            <template v-if="item.type.value == 'radio'">
              <el-radio-group
                size="default"
                v-model="formModel[item.name_field]"
              >
                <template v-for="(items, idx) in item.options" :key="idx">
                  <el-radio :label="items.value" border>{{
                    items.label
                  }}</el-radio>
                </template>
              </el-radio-group>
            </template>
            <template v-if="item.type.value == 'select'">
              <el-select v-model="formModel[item.name_field]" size="default">
                <el-option
                  v-for="items in item.options"
                  :key="items.value"
                  :label="items.label"
                  :value="items.value"
                />
              </el-select>
            </template>
          </div>
          <!-- 帮助 -->
          <help :hideIcon="true">
            {{ item.desc }}
          </help>
        </el-form-item>
      </template>
    </el-form>
    <div class="mt50 flex center">
      <el-button v-if="isModal" @click="close">取消</el-button>
      <el-button
        type="primary"
        @click="createOk()"
        :loading="btnLoading"
        :disabled="btnLoading"
        v-permission="'system-basic-save'"
        >保存</el-button
      >
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "systemBasicUpdateForm",
};
</script>
<script lang="ts" setup>
import { ref, getCurrentInstance, onMounted, watch } from "vue";
import { getConfigItems, saveConfig } from "@/api/system/basic";
import type { Result, ResultError } from "@/types";
import { useConfig } from "@/store";

const props = withDefaults(
  defineProps<{
    isModal?: boolean;
  }>(),
  {
    isModal: false,
  }
);

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["close"]);

const itemsLoading = ref<boolean>(true);

const tabActiveName = ref<string>("");

const itemActive = ref<string>("");

const tabActiveItem: any = ref({});

const btnLoading = ref(false);

const formRule: any = ref([]);

const formModel: any = ref({});

const createOk = () => {
  if (btnLoading.value) {
    return;
  }
  btnLoading.value = true;
  saveConfig(formModel.value)
    .then((res: Result) => {
      $utils.successMsg(res.message);
      initConfigItems();
      initSystemInfo();
      btnLoading.value = false;
      close();
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
      btnLoading.value = false;
    });
};

const tabId = ref<number | string>(0);

const initConfigItems = () => {
  itemsLoading.value = true;
  getConfigItems({
    tab_id: tabId.value,
  })
    .then((res: Result) => {
      formRule.value = res.data.rule;
      formModel.value = res.data.form;
      setTimeout(() => {
        itemsLoading.value = false;
      }, 500);
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
    });
};

const toInit = (id: number | string) => {
  tabId.value = id;
  initConfigItems();
};

const initSystemInfo = () => {
  useConfig().setSystemInfo();
};

const close = () => {
  emit("close");
};

defineExpose({ toInit });
</script>
